<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>arcmap.jsp</title>
<style>


.land {
  fill: #ddd;
}

.state-borders {
  fill: none;
  stroke: #fff;
}

.airport-arc {
  fill: none;
}

.airport:hover .airport-arc {
  stroke: #f00;
}

.airport-cell {
  fill: none;
  stroke: #000;
  stroke-opacity: 0.1;
  pointer-events: all;
}
</style>
</head>
<body>
	<svg width="960" height="500"></svg>
	<script
		src="${pageContext.request.contextPath}/static/fw/plugin/d3/d3.min.js"
		charset="utf-8"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script>


	var svg = d3.select("svg"),
	    width = +svg.attr("width"),
	    height = +svg.attr("height");

	var projection = d3.geoAlbers()
	    .translate([width / 2, height / 2])
	    .scale(1280);

	var radius = d3.scaleSqrt()
	    .domain([0, 100])
	    .range([0, 14]);

	var path = d3.geoPath()
	    .projection(projection)
	    .pointRadius(2.5);

	var voronoi = d3.voronoi()
	    .extent([[-1, -1], [width + 1, height + 1]]);

	d3.queue()
	    .defer(d3.json, "${pageContext.request.contextPath}/pages/voronoi/arcmap_us.json")
	    .defer(d3.csv, "${pageContext.request.contextPath}/pages/voronoi/arcmap_airports.csv", typeAirport)
	    .defer(d3.csv, "${pageContext.request.contextPath}/pages/voronoi/arcmap_flights.csv", typeFlight)
	    .await(ready);

	function ready(error, us, airports, flights) {
	  if (error) throw error;

	  var airportByIata = d3.map(airports, function(d) { return d.iata; });

	  flights.forEach(function(flight) {
	    var source = airportByIata.get(flight.origin),
	        target = airportByIata.get(flight.destination);
	    source.arcs.coordinates.push([source, target]);
	    target.arcs.coordinates.push([target, source]);
	  });

	  airports = airports
	      .filter(function(d) { return d.arcs.coordinates.length; });

	  svg.append("path")
	      .datum(topojson.feature(us, us.objects.land))
	      .attr("class", "land")
	      .attr("d", path);

	  svg.append("path")
	      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
	      .attr("class", "state-borders")
	      .attr("d", path);

	  svg.append("path")
	      .datum({type: "MultiPoint", coordinates: airports})
	      .attr("class", "airport-dots")
	      .attr("d", path);

	  var airport = svg.selectAll(".airport")
	    .data(airports)
	    .enter().append("g")
	      .attr("class", "airport");

	  airport.append("title")
	      .text(function(d) { return d.iata + "\n" + d.arcs.coordinates.length + " flights"; });

	  airport.append("path")
	      .attr("class", "airport-arc")
	      .attr("d", function(d) { return path(d.arcs); });

	  airport.append("path")
	      .data(voronoi.polygons(airports.map(projection)))
	      .attr("class", "airport-cell")
	      .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; });
	}

	function typeAirport(d) {
	  d[0] = +d.longitude;
	  d[1] = +d.latitude;
	  d.arcs = {type: "MultiLineString", coordinates: []};
	  return d;
	}

	function typeFlight(d) {
	  d.count = +d.count;
	  return d;
	}
	</script>
</body>
</html>